<template>
  <div class="sub-main-search-view">
    <div class="search-select">
      <commonCard title="搜索" iconName="search">
        <div class="select-search-card-content">
          <div class="search-header">
            <div class="input-search-btn">
              <div class="input-search">
                <el-input v-model="keyWords" placeholder="请输入关键字" type="text"/>
              </div>
              <div class="input-btn">
                <el-button type="primary" @click="SearchButton">搜索</el-button>
              </div>
            </div>
          </div>
          <div class="search-content">
            <div class="search-content-item-wrap">
              <div class="search-content-item">
                <el-select v-model="area" popper-class="big-screnn-popper" placeholder="请选择区镇" @change="Change">
                  <el-option
                      v-for="item in option"
                      :key="item.value"
                      :value="item.value"
                  />
                </el-select>
              </div>
              <div class="search-content-item">
                <el-select v-model="type" placeholder="请选择规划用途" @change="Change">
                  <el-option
                      v-for="item in option1"
                      :key="item.value"
                      :value="item.value"
                  />
                </el-select>
              </div>
            </div>
            <div class="search-content-item-wrap">
              <div class="search-content-item">
                <el-select v-model="process" placeholder="请选择进度" @change="Change">
                  <el-option
                      v-for="item in option2"
                      :key="item.value"
                      :value="item.value"
                  />
                </el-select>
              </div>
              <div class="search-content-item" @change="Change">
                <el-date-picker
                    v-model="Time"
                    type="date"
                    placeholder="选择日期"
                    style="width: 100%"
                    format="YYYY年MM月DD日"
                    value-format="YYYY年MM月DD日"
                >
                </el-date-picker>
              </div>
            </div>
          </div>
          <div class="search-count">
            <span>查找到</span>
            <span class="search-count-number">{{ searchNum }}</span>
            <span>个结果</span>
          </div>
          <div class="search-detail" v-if="Data===1">
            <detailCard v-for="(item,key) in test" :key="key" :index="key" :item="item"
                        @selectItemModal="selectItemModal"
                        @passLandId="passLandId"
                        @passTitle="passTitle"
                        @passStateId="passStateId"
            >
            </detailCard>
          </div>
          <div class="search-detail" v-if="Data===2">
            <detailCard v-for="(item, key) in data1" :key="key" :index="key" :item="item"
                        @selectItemModal="selectItemModal"
                        @passLandId="passLandId"
                        @passTitle="passTitle"
                        @passStateId="passStateId"
            ></detailCard>
          </div>
        </div>
      </commonCard>
    </div>
    <!-- 只能有一个modal，不然会重叠 -->
    <!-- 加一层类名让地图可以操作 -->
    <div class="fix-operate-map">
      <el-dialog v-model="dialogFormVisible"
                 :custom-class="dialogTimeVisible ? 'detail-progress-modal g-filter': 'detail-progress-modal'"
                 :modal="false" :draggable="true">
        <template v-slot:title>
          <div class="plan-modal">
            <div class="modal-content-header-title">
              <span>{{ title }}“标准地”全链动态管理</span>
            </div>
            <div @click="viewTimeLine" class="modal-content-header-operate">
              <span v-if="isQuestion">问题反馈 > </span>
              <span v-else-if="isKanTan">勘探记录 > </span>
            </div>
          </div>
        </template>
        <div class="detail-progress-modal-info">
          <div class="progress-line">
            <template v-for="(item, index) in progressArrWithActive" :key="index">
              <div :class="{'is-active': item.isActive}" class="line-circle" @click="handleProgress(index)">
                <span>{{ index + 1 }}</span>
              </div>
              <div :class="{'is-active': item.isActive}" class="line-text" @click="handleProgress(index)">
                <span>{{ item.label }}</span>
              </div>
              <div :class="{'is-active': item.isActive}" class="line-only"
                   v-if="index < progressArrWithActive.length - 1" @click="handleProgress(index)"></div>
            </template>
          </div>
          <div class="progress-table" v-if="currentProgress === 1">
            <div class="progress-table-header">
              <span>“标准地”整备计划申报表</span>
            </div>
            <div class="progress-table-body">
              <commonTableDo :index="landId"
                             :confirmState="confirmState"
                             :PassState="PassState"
                             :newState="newState"
                             @receiveStateId="receiveStateId"/>
            </div>
          </div>
          <div class="progress-table" v-if="currentProgress === 2 && Progress === 2 ">
            <div class="progress-table-header table-2">
              <span>七评合一</span>
            </div>
            <div class="progress-table-body">
              <commonTableTwo :index="landId"
                              :confirmState="confirmState"
                              :PassState="PassState"
                              :newState="newState"
                              :userName="name"
                              :stateId="stateId"
                              @receiveProgress="receiveProgress"/>
            </div>
          </div>
          <div class="progress-table" v-if="currentProgress === 2 && (Progress > 2) ">
            <div class="progress-table-header table-2">
              <span>七评合一</span>
            </div>
            <div class="progress-table-body">
              <commonTableTwoDo :index="landId"
                                :confirmState="confirmState"
                                :PassState="PassState"
                                :userName="name"
                                :newState="newState"
              />
            </div>
          </div>
          <div class="progress-table" v-if="currentProgress === 3 && (Progress ===3 || Progress === 2) && stateId===1">
            <div class="progress-table-header table-2">
              <span>收储协议填写</span>
            </div>
            <div class="progress-table-body">
              <commonTableThree :index="landId"
                                :confirmState="confirmState"
                                :PassState="PassState"
                                :userName="name"
                                :newState="newState"
                                :Progress="Progress"
                                @receiveStateId="receiveStateId"/>
            </div>
          </div>
          <div class="progress-table"
               v-if="currentProgress === 3 && (Progress >3 || ((Progress === 3 || Progress === 2) && stateId===2)) ">
            <div class="progress-table-header table-2">
              <span>收储协议填写</span>
            </div>
            <div class="progress-table-body">
              <commonTableThreeDo :index="landId"
                                  :confirmState="confirmState"
                                  :PassState="PassState"
                                  :userName="name"
                                  :newState="newState"
                                  @receiveStateId="receiveStateId"/>
            </div>
          </div>
          <div class="progress-table" v-if="currentProgress === 4 && Progress === 4 && stateId===1">
            <div class="progress-table-header table-2">
              <span>土地平整</span>
            </div>
            <div class="progress-table-body">
              <commonTableFour :index="landId" :confirmState="confirmState" :PassState="PassState" :userName="name"
                               :newState="newState"
                               @receiveStateId="receiveStateId"/>
            </div>
          </div>
          <div class="progress-table"
               v-if="currentProgress === 4 && (Progress > 4 || (Progress === 4 && stateId===2)) ">
            <div class="progress-table-header table-2">
              <span>土地平整</span>
            </div>
            <div class="progress-table-body">
              <commonTableFourDo :index="landId" :confirmState="confirmState" :PassState="PassState" :userName="name"
                                 :newState="newState"
                                 @receiveStateId="receiveStateId"/>
            </div>
          </div>
          <div class="progress-table" v-if="currentProgress === 5 && Progress ===5 && stateId===1">
            <div class="progress-table-header table-2">
              <span>材料归档</span>
            </div>
            <div class="progress-table-body">
              <commonTableFive :index="landId" :confirmState="confirmState" :PassState="PassState" :userName="name"
                               :newState="newState"
                               @receiveStateId="receiveStateId"/>
            </div>
          </div>
          <div class="progress-table" v-if="currentProgress === 5 && (Progress >5 || (Progress === 5 && stateId===2)) ">
            <div class="progress-table-header table-2">
              <span>材料归档</span>
            </div>
            <div class="progress-table-body">
              <commonTableFiveDo :index="landId" :confirmState="confirmState" :PassState="PassState" :userName="name"
                                 :newState="newState"
                                 @receiveStateId="receiveStateId"/>
            </div>
          </div>
          <div class="progress-table" v-if="currentProgress === 6 && Progress ===6 && stateId===1 ">
            <div class="progress-table-header table-2">
              <span>形成“标准地”</span>
            </div>
            <div class="progress-table-body">
              <commonTableSix :index="landId" :confirmState="confirmState" :PassState="PassState" :newState="newState"
                              @receiveStateId="receiveStateId"/>
            </div>
          </div>
        </div>
        <template #footer>
          <div class="marcker-footer">
            <div class="footer-btn">
              <template
                  v-if="currentProgress === Progress && currentProgress<6 && currentProgress !== 2 ">
                <el-button type="primary" @click="closeModal">取消</el-button>
                <el-button type="success" @click="confirmModal">确定</el-button>
                <el-button type="primary" @click="passModal">通过</el-button>
              </template>
              <template v-if="(currentProgress < Progress && currentProgress<6)
              || (Progress===2 && (currentProgress === 2 || currentProgress === 3 )
              || (Progress === 6)
          )">
                <el-button type="primary" @click="closeModal">取消</el-button>
                <el-button type="success" @click="confirmModal">确定</el-button>
              </template>
            </div>
          </div>
        </template>
      </el-dialog>
    </div>
    <div class="fix-operate-map">
      <el-dialog v-model="dialogTimeVisible" custom-class="detail-progress-modal detail-timeline-modal"
                 :draggable="true">
        <template v-slot:title>
          <div class="header-modal-two">
            <div class="modal-content-header-title">
              <span v-if="isQuestion">{{ title }}问题列表</span>
              <span v-if="isKanTan">{{ title }}勘探记录</span>
            </div>
            <div class="modal-content-header-title right">
              <span v-if="isQuestion">问题反馈</span>
              <span v-if="isKanTan">勘探记录</span>
            </div>
          </div>
        </template>
        <div class="content-center">
          <div class="left">
            <template v-if="isQuestion">
              <div class="add-question" @click="handleQuestion(false)">
                <div class="add">
                  <span>+</span>
                </div>
                <div class="text">
                  <span>新增问题反馈</span>
                </div>
              </div>
              <div class="time-line">
                <timeLine :timeLineArr="timeQuestionLineArr" isQuestion @clinkItem="getCurrentItem"/>
              </div>
            </template>
            <template v-if="isKanTan">
              <div class="time-line">
                <timeLine :timeLineArr="timeKanTanLineArr" @clinkItem="getCurrentKanTanItem"/>
              </div>
            </template>
          </div>
          <div class="center"></div>
          <div class="right">
            <template v-if="isQuestion">
              <questionDetailComp ref="questionChild" :operateCanSave="operateCanSave" v-show="isShowRight"
                                  :detail="questionDetail"/>
            </template>
            <template v-if="isKanTan">
              <kanTanDetailComp v-show="isShowKanTanRight" :detail="kanTanDetail"/>
            </template>
          </div>
        </div>
        <template #footer>
          <template v-if="isQuestion && isShowRight">
            <el-popconfirm title="确定要删除这条问题反馈吗？" cancelButtonText="否" confirmButtonText="是" @confirm="confirmDeleteQues"
                           v-if="!currentQuestionItem.isAdd">
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
            <el-button type="primary" @click="saveQuestion" v-if="!currentQuestionItem.isApply">
              <span>{{ currentQuestionItem.isAdd ? '新建' : '保存' }}</span>
            </el-button>
          </template>
          <template v-if="isKanTan && isShowKanTanRight">
            <el-popconfirm title="确定要删除这条勘探记录吗？" cancelButtonText="否" confirmButtonText="是"
                           @confirm="confirmDeleteKanTan">
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script lang="ts">
import {computed, defineComponent, getCurrentInstance, onMounted, reactive, ref, watch} from 'vue'
import commonCard from '@/components/commonCard/index.vue'
import detailCard from './components/detailCard.vue'
import commonTableDo from '@/components/commonTable/indexDo.vue'
import commonTableTwo from '@/components/commonTableTwo/index.vue'
import commonTableTwoDo from '@/components/commonTableTwo/indexDo.vue'
import commonTableThree from '@/components/commonTableThree/index.vue'
import commonTableThreeDo from '@/components/commonTableThree/indexDo.vue'
import commonTableFour from '@/components/commonTableFour/index.vue'
import commonTableFourDo from '@/components/commonTableFour/indexDo.vue'
import commonTableFive from '@/components/commonTableFive/index.vue'
import commonTableFiveDo from '@/components/commonTableFive/indexDo.vue'
import commonTableSix from '@/components/commonTableSix/index.vue'
import questionDetailComp from './components/questionDetailComp.vue'
import kanTanDetailComp from './components/kantanDetailComp.vue'
import handleMarketModal from './components/marketModal'
import Fuse from "fuse.js";
import timeLine from './components/timeLine.vue'
import DataJson from "../../../../../public/config/data.json";

export default defineComponent({
  components: {
    commonCard,
    detailCard,
    commonTableTwo,
    commonTableThree,
    commonTableThreeDo,
    commonTableFour,
    commonTableFourDo,
    commonTableFive,
    commonTableDo,
    commonTableTwoDo,
    commonTableFiveDo,
    commonTableSix,
    timeLine,
    questionDetailComp,
    kanTanDetailComp,
  },
  props: ['userName'],
  emits: ["refresh"],
  setup(props) {
    const formObj = reactive({
      allArea: '',
      allKey: '',
      progress: '',
    })
    const instance = getCurrentInstance();
    const api = instance?.appContext.config.globalProperties.api;
    let num = ref(0)
    const name = ref(props.userName)
    let searchNum = ref(0)
    let Data = ref(1)
    let data1: any = ref()
    let keyWords = ref('')
    let stateId = ref(0)
    let type = ref('')
    let Time = ref('');
    let process = ref('');
    let area = ref('');
    const detailArr = reactive([])
    const {appContext} = getCurrentInstance();
    const test = ref(detailArr)
    //模糊搜索
    const SearchButton = () => {
      //清空类型
      type.value = ''
      process.value = ''
      area.value = ''
      Time.value = ''

      if (keyWords.value.trim()) {
        searchNum.value = (new Fuse(detailArr, {
          findAllMatches: true,
          keys: ['title']
        })).search(keyWords.value.trim().replace(/\s*/g, '')).map(e => e.item).length;
        test.value = (new Fuse(detailArr, {
          findAllMatches: true,
          keys: ['title']
        })).search(keyWords.value.trim().replace(/\s*/g, '')).map(e => e.item)
      } else {
        searchNum.value = num.value
        test.value = detailArr
      }
      //展示搜索按钮显示的数据
      Data.value = 1;
    }
    //类型搜索
    const Change = () => {
      keyWords.value = ''
      searchNum.value = 0
      data1.value = []
      if (area.value != '') {
        if (Time.value != null) {
          if (type.value !== '' && Time.value !== '' && process.value !== '') {
            for (let i = 0; i < detailArr.length; i++) {
              if (detailArr[i].type === type.value
                  && option2[(detailArr[i].currentProgress) - 1].value === process.value
                  && detailArr[i].area == area.value) {
                data1.value.push(detailArr[i])
                searchNum.value++
              }
            }
          } else if (type.value === '' && Time.value !== '' && process.value !== '') {
            for (let i = 0; i < detailArr.length; i++) {
              if (option2[(detailArr[i].currentProgress) - 1].value === process.value
                  && detailArr[i].area == area.value) {
                data1.value.push(detailArr[i])
                searchNum.value++
              }
            }
          } else if (type.value !== '' && Time.value === '' && process.value !== '') {
            for (let i = 0; i < detailArr.length; i++) {
              if (detailArr[i].type === type.value
                  && option2[(detailArr[i].currentProgress) - 1].value === process.value
                  && detailArr[i].area == area.value) {
                data1.value.push(detailArr[i])
                searchNum.value++
              }
            }
          } else if (type.value !== '' && Time.value !== '' && process.value === '') {
            for (let i = 0; i < detailArr.length; i++) {
              if (detailArr[i].type === type.value
                  && detailArr[i].area == area.value) {
                data1.value.push(detailArr[i])
                searchNum.value++
              }
            }
          } else if (type.value === '' && Time.value === '' && process.value !== '') {
            for (let i = 0; i < detailArr.length; i++) {
              if (option2[(detailArr[i].currentProgress) - 1].value === process.value
                  && detailArr[i].area == area.value) {
                data1.value.push(detailArr[i])
                searchNum.value++
              }
            }
          } else if (type.value !== '' && Time.value === '' && process.value === '') {
            for (let i = 0; i < detailArr.length; i++) {
              if (detailArr[i].type === type.value
                  && detailArr[i].area == area.value) {
                data1.value.push(detailArr[i])
                searchNum.value++
              }
            }
            // } else if (type.value === '' && Time.value !== '' && process.value === '') {
            //   for (let i = 0; i < detailArr.length; i++) {
            //     if (detailArr[i].time === Time.value) {
            //       data1.value.push(i)
            //       num.value++
            //     }
            //   }
            // }
          } else if (type.value === '' && process.value === '' && Time.value === '') {
            for (let i = 0; i < detailArr.length; i++) {
              if (detailArr[i].area == area.value) {
                data1.value.push(detailArr[i])
                searchNum.value++
              }
            }
          }
        } else {
          if (type.value === '' && process.value !== '') {
            for (let i = 0; i < detailArr.length; i++) {
              if (option2[(detailArr[i].currentProgress) - 1].value === process.value
                  && detailArr[i].area == area.value) {
                data1.value.push(detailArr[i])
                searchNum.value++
              }
            }
          } else if (type.value !== '' && process.value !== '') {
            for (let i = 0; i < detailArr.length; i++) {
              if (option2[(detailArr[i].currentProgress) - 1].value === process.value
                  && detailArr[i].type === type.value
                  && detailArr[i].area == area.value) {
                data1.value.push(detailArr[i])
                searchNum.value++
              }
            }
          } else if (type.value !== '' && process.value === '') {
            for (let i = 0; i < detailArr.length; i++) {
              if (detailArr[i].type === type.value
                  && detailArr[i].area == area.value) {
                data1.value.push(detailArr[i])
                searchNum.value++
              }
            }
          } else if (type.value === '' && process.value === '') {
            for (let i = 0; i < detailArr.length; i++) {
              if (detailArr[i].area == area.value) {
                data1.value.push(detailArr[i])
                searchNum.value++
              }
            }
          }
        }
      } else {
        if (Time.value != null) {
          if (type.value !== '' && Time.value !== '' && process.value !== '') {
            for (let i = 0; i < detailArr.length; i++) {
              if (detailArr[i].type === type.value && option2[(detailArr[i].currentProgress) - 1].value === process.value) {
                data1.value.push(detailArr[i])
                searchNum.value++
              }
            }
          } else if (type.value === '' && Time.value !== '' && process.value !== '') {
            for (let i = 0; i < detailArr.length; i++) {
              if (option2[(detailArr[i].currentProgress) - 1].value === process.value) {
                data1.value.push(detailArr[i])
                searchNum.value++
              }
            }
          } else if (type.value !== '' && Time.value === '' && process.value !== '') {
            for (let i = 0; i < detailArr.length; i++) {
              if (detailArr[i].type === type.value && option2[(detailArr[i].currentProgress) - 1].value === process.value) {
                data1.value.push(detailArr[i])
                searchNum.value++
              }
            }
          } else if (type.value !== '' && Time.value !== '' && process.value === '') {
            for (let i = 0; i < detailArr.length; i++) {
              if (detailArr[i].type === type.value) {
                data1.value.push(detailArr[i])
                searchNum.value++
              }
            }
          } else if (type.value === '' && Time.value === '' && process.value !== '') {
            for (let i = 0; i < detailArr.length; i++) {
              if (option2[(detailArr[i].currentProgress) - 1].value === process.value) {
                data1.value.push(detailArr[i])
                searchNum.value++
              }
            }
          } else if (type.value !== '' && Time.value === '' && process.value === '') {
            for (let i = 0; i < detailArr.length; i++) {
              if (detailArr[i].type === type.value) {
                data1.value.push(detailArr[i])
                searchNum.value++
              }
            }
            // } else if (type.value === '' && Time.value !== '' && process.value === '') {
            //   for (let i = 0; i < detailArr.length; i++) {
            //     if (detailArr[i].time === Time.value) {
            //       data1.value.push(i)
            //       num.value++
            //     }
            //   }
            // }
          }
        } else {
          if (type.value === '' && process.value !== '') {
            for (let i = 0; i < detailArr.length; i++) {
              if (option2[(detailArr[i].currentProgress) - 1].value === process.value) {
                data1.value.push(detailArr[i])
                searchNum.value++
              }
            }
          } else if (type.value !== '' && process.value !== '') {
            for (let i = 0; i < detailArr.length; i++) {
              if (option2[(detailArr[i].currentProgress) - 1].value === process.value && detailArr[i].type === type.value) {
                data1.value.push(detailArr[i])
                searchNum.value++
              }
            }
          } else if (type.value !== '' && process.value === '') {
            for (let i = 0; i < detailArr.length; i++) {
              if (detailArr[i].type === type.value) {
                data1.value.push(detailArr[i])
                searchNum.value++
              }
            }
          }
        }
      }
      Data.value = 2;
    }
    //搜索按钮绑定回车键
    watch(keyWords, () => {
      document.onkeydown = function (e) {
        if (e.keyCode === 13) {
          SearchButton()
        }
      }
    })

    const currentProgress = ref(1)
    const newState = ref(false)
    const Progress = ref(1)
    const landId = ref(1)
    const title = ref('')

    //区镇信息
    const option = reactive(DataJson).selectTown
    //类型信息
    const option1 = reactive(DataJson).useOption
    //进度信息
    const option2 = reactive(DataJson).processMessage
    const isQuestion = computed(() => currentProgress.value === 1 || currentProgress.value === 2)
    const isKanTan = computed(() => currentProgress.value === 4)
    const {dialogFormVisible, openModal, progressArrWithActive} = handleMarketModal(currentProgress)
    const dialogTimeVisible = ref(false)

    //改变页面确认状态
    const receiveStateId = (id) => {
      stateId.value = id
    }
    const receiveProgress = (id) => {
      Progress.value = id
    }

    //获取传输时间
    const getTime = (time) => {
      if (time != '' && time != null) {
        let year = time[0] + time[1] + time[2] + time[3]
        let mouth = time[4] + time[5]
        let day = time[6] + time[7]
        return year + '年' + mouth + '月' + day + '日'
      }
    }
    //获取当前时间
    const getCurrentTime = (index) => {
      let date = new Date();
      //年
      let year = date.getFullYear().toString();
      //月份是从0月开始获取的，所以要+1;
      let month = ''
      if ((date.getMonth() + 1) < 10) {
        month = '0' + (date.getMonth() + 1).toString()
      } else {
        month = (date.getMonth() + 1).toString()
      }
      //日
      let day = date.getDate().toString();
      if (index === 1) {
        return year + '年' + month + '月' + day + '日'
      } else {
        return year + month + day
      }

    }
    //重新获取当前数据
    const reload = (index) => {
      if (index === 1) {
        timeQuestionLineArr.value = []
        appContext.config.globalProperties.axios({
          url: `api/landFeedback/find?landId=${landId.value}`,
          method: 'get',
          data: []
        }).then((response) => {
          response.data.forEach(item => {
            let object = {
              index: '',
              name: '',
              id: '',
              title: '',
              content: '',
              questionUser: '',
              time: '',
              apply: '',
              replayUser: '',
              isApply: false
            }
            object.index = item.landid
            object.name = item.name
            object.id = item.qid
            object.title = item.qtitle
            object.content = item.qcontent
            object.questionUser = item.quser
            object.time = item.qdate
            object.apply = item.rcontent
            object.replayUser = item.ruser
            object.isApply = item.rstatus === '1';
            timeQuestionLineArr.value.push(object)
          })
        })

      } else if (index == 2) {
        timeQuestionLineArr.value = []
        appContext.config.globalProperties.axios({
          url: `api/evalFeedback/find?landId=${landId.value}`,
          method: 'get',
          data: []
        }).then((response) => {
          response.data.forEach(item => {
            let object = {
              index: '',
              name: '',
              id: '',
              title: '',
              content: '',
              questionUser: '',
              time: '',
              apply: '',
              replayUser: '',
              isApply: false
            }
            object.index = item.landid
            object.name = item.name
            object.id = item.qid
            object.title = item.qtitle
            object.content = item.qcontent
            object.questionUser = item.quser
            object.time = item.qdate
            object.apply = item.rcontent
            object.replayUser = item.ruser
            object.isApply = item.rstatus === '1';
            timeQuestionLineArr.value.push(object)
          })
        })
      } else {
        detailArr.length = 0
        appContext.config.globalProperties.axios({
          url: 'api/search',
          method: 'post',
          data: [],
          transformRequest: [function () {
            let oMyForm = new FormData();
            oMyForm.append("town", name.value);
            return oMyForm;
          }]
        }).then((response) => {
          response.data.forEach(item => {
            let object = {
              index: '',
              type: '',
              classname: '',
              title: '',
              area: '',
              location: '',
              currentProgress: '',
              point: '',
              stateId: '',
              process:'',
              fileState:'',
              exploreProcess:''
            }
            object.index = item.gid
            object.type = item.landtype
            object.classname = item.classname
            object.title = item.bz
            object.area = item.town
            object.location = item.landloc
            object.currentProgress = item.landstep
            object.point = item.geom
            object.stateId = item.stateId
            object.process = item.process
            object.fileState = item.fileState
            object.exploreProcess = item.exploreProcess
            detailArr.push(object)
          })
          if(keyWords.value !== '' && keyWords.value !== null){
            SearchButton()
          }
          if(process.value !== '' || area.value !== ''){
            Change()
          }
        })

      }
    }
    //初始化数据
    onMounted(() => {
      appContext.config.globalProperties.axios({
        url: 'api/search',
        method: 'post',
        data: [],
        transformRequest: [function () {
          let oMyForm = new FormData();
          oMyForm.append("town", name.value);
          return oMyForm;
        }]
      }).then((response) => {
        response.data.forEach(item => {
          let object = {
            index: '',
            type: '',
            classname: '',
            title: '',
            area: '',
            location: '',
            currentProgress: '',
            pointArea: '',
            point: '',
            stateId: '',
            process:'',
            fileState:'',
            exploreProcess:''
          }
          object.index = item.gid
          object.type = item.landtype
          object.classname = item.classname
          object.title = item.bz
          object.area = item.town
          object.location = item.landloc
          object.currentProgress = item.landstep
          object.pointArea = item.geom
          object.point = item.point
          object.stateId = item.stateId
          object.process = item.process
          object.fileState = item.fileState
          object.exploreProcess = item.exploreProcess
          detailArr.push(object)
        })
      })
    })
    //初始化搜素结果个数
    onMounted(() => {
      appContext.config.globalProperties.axios({
        url: 'api/landStep/sum',
        method: 'post',
        data: [],
        transformRequest: [function () {
          let oMyForm = new FormData();
          oMyForm.append("town", name.value);
          return oMyForm;
        }]
      }).then((response) => {
        num.value = response.data[0].value
        searchNum.value = num.value
      })
    })

    //开关时间线
    const viewTimeLine = () => {
      handleQuestion(false)
      timeQuestionLineArr.value = []
      if (currentProgress.value === 1) {
        reload(1)
      } else {
        reload(2)
      }
      dialogTimeVisible.value = true
    }
    const closeTimeModal = () => {
      dialogTimeVisible.value = false
    }

    //时间线列表
    const timeQuestionLineArr = ref([])
    const landTimeLine = ref([])
    const EvaluationTimeLine = ref([])
    let questionDetail = ref({
      title: '',
      content: '',
      apply: '',
      time: ''
    })
    //新增数据设置
    const currentQuestionItem = reactive({
      id: '',
      isAdd: true, //是否新增
      isApply: false,
    })
    const timeKanTanLineArr = ref([])
    let kanTanDetail = ref({
      desc: '',
      id: 0,
      pic: [],
      video: [],
      time: ''
    })
    // 是否显示右侧
    const isShowRight = ref(false)
    //操作是否能保存
    const operateCanSave = ref(true)
    // 处理问题
    const handleQuestion = (canSave = false, detail = {
      title: '',
      content: '',
      apply: '',
      id: '',
      isApply: false,
      time: getCurrentTime(1),
    }) => {
      // 是否展示右侧
      isShowRight.value = true
      // 是否是编辑
      operateCanSave.value = canSave
      // 问题内容详情
      questionDetail.value = detail
      //切换当前选中
      currentQuestionItem.id = detail.id
      currentQuestionItem.isApply = detail.isApply
      // 如果是canSave = false说明是新增
      currentQuestionItem.isAdd = !canSave
      // console.log(questionDetail.value, questionDetailComp.content);
    }
    // 处理勘探
    const handleKanTan = (detail = {
      desc: '',
      id: 0,
      pic: [],
      video: [],
      time: ''
    }) => {
      kanTanDetail.value = detail
    }
    //获取图片视频位置
    let getPicVideoUrl = (exploreId: string, mFileId: string, pic, index: number) => {
      if (mFileId != "" && mFileId != null) {
        if (index === 1) {
          pic.push("api/explorefeedback/getimage?exploreid=" + exploreId + "&mfileid=" + mFileId)
        } else {
          pic.push("api/explorefeedback/getvideo?exploreid=" + exploreId + "&mfileid=" + mFileId)
        }
      }
    }
    //获取当前勘探资源
    const getCurrentKanTanItem = (item) => {
      //切换选中状态
      for (let index = 0; index < timeQuestionLineArr.value.length; index++) {
        const element = timeQuestionLineArr.value[index];
        element.isActive = element.id === item.id;
      }
      //此处根据id自己获取detail，暂时写死
      setTimeout(() => {
        const detail = {
          desc: item.desc,
          id: item.id,
          pic: item.pic,
          video: item.video,
          time: item.time
        }
        handleKanTan(detail)
        isShowKanTanRight.value = true
      }, 200);
    }
    //获取当前上市问题资源
    const getCurrentItem = (item) => {
      //切换选中状态
      for (let index = 0; index < timeQuestionLineArr.value.length; index++) {
        const element = timeQuestionLineArr.value[index];
        element.isActive = element.id === item.id;
      }
      setTimeout(() => {
        const detail = {
          title: item.title,
          content: item.content,
          apply: item.apply,
          id: item.id,
          isApply: item.isApply,
          time: item.time
        }
        handleQuestion(true, detail)
      }, 200);
    }
    const isShowKanTanRight = ref(false)

    let questionChild = ref(null)
    //设置保存功能
    const saveQuestion = () => {
      //模拟接口新增
      if (currentQuestionItem.isAdd) {
        if (currentProgress.value === 1) {
          appContext.config.globalProperties.axios({
            url: `api/landFeedback/insert`,
            method: 'post',
            data: formObj,
            transformRequest: [function () {
              let oMyForm = new FormData();
              oMyForm.append("landId", landId.value.toString());
              oMyForm.append("questionTitle", questionChild.value.title);
              oMyForm.append("questionContent", questionChild.value.content + '————' + props.userName);
              oMyForm.append("questionUser", props.userName);
              oMyForm.append("questionDate", getCurrentTime(0));
              oMyForm.append("replyStatus", '0');
              return oMyForm;
            }]
          }).then(() => {
            reload(1)
          })
        } else {
          appContext.config.globalProperties.axios({
            url: `api/evaluatefeedback/insert`,
            method: 'post',
            data: formObj,
            transformRequest: [function () {
              let oMyForm = new FormData();
              oMyForm.append("landId", landId.value.toString());
              oMyForm.append("questionTitle", questionChild.value.title);
              oMyForm.append("questionContent", questionChild.value.content + '————' + props.userName);
              oMyForm.append("questionUser", props.userName);
              oMyForm.append("questionDate", getCurrentTime(0));
              oMyForm.append("replyStatus", '0');
              return oMyForm;
            }]
          }).then(() => {
            reload(2)
          })

        }

      } else {
        // 保存
        setTimeout(() => {
          currentQuestionItem.isApply = true
          //切换回复状态
          for (let index = 0; index < timeQuestionLineArr.value.length; index++) {
            const element = timeQuestionLineArr.value[index];
            if (element.id === currentQuestionItem.id) {
              element.isApply = true
              element.content = questionChild.value.content
            }
          }
        }, 200);
        if (currentProgress.value === 1) {
          appContext.config.globalProperties.axios({
            url: `api/landfeedback/update`,
            method: 'post',
            data: formObj,
            transformRequest: [function () {
              let oMyForm = new FormData();
              oMyForm.append("landId", landId.value.toString());
              oMyForm.append("questionId", currentQuestionItem.id);
              oMyForm.append("replyContent", questionChild.value.apply + '————' + props.userName);
              oMyForm.append("replyUser", props.userName);
              oMyForm.append("replyStatus", '1');
              return oMyForm;
            }]
          }).then(() => {
            reload(1)
          })
        } else {
          appContext.config.globalProperties.axios({
            url: `api/evaluatefeedback/update`,
            method: 'post',
            data: formObj,
            transformRequest: [function () {
              let oMyForm = new FormData();
              oMyForm.append("landId", landId.value.toString());
              oMyForm.append("questionId", currentQuestionItem.id);
              oMyForm.append("replyContent", questionChild.value.apply + '————' + props.userName);
              oMyForm.append("replyUser", props.userName);
              oMyForm.append("replyStatus", '1');
              return oMyForm;
            }]
          }).then(() => {
            reload(2)
          })
        }

      }
    }
    //设置上市问题确认功能
    const confirmDeleteQues = () => {
      // console.log(currentQuestionItem.id);
      let index = 0
      for (index = 0; index < timeQuestionLineArr.value.length; index++) {
        const element = timeQuestionLineArr.value[index];
        if (element.id === currentQuestionItem.id) {
          break
        }
      }
      timeQuestionLineArr.value.splice(index, 1)
      if (currentProgress.value === 1) {
        appContext.config.globalProperties.axios({
          url: `api/landFeedback/delete?landId=${landId.value}&questionId=${currentQuestionItem.id}`,
          method: 'get',
          data: []
        }).then(() => {
          reload(1)
        })

      } else {
        appContext.config.globalProperties.axios({
          url: `api/evalFeedback/delete?landId=${landId.value}&questionId=${currentQuestionItem.id}`,
          method: 'get',
          data: []
        }).then(() => {
          reload(2)
        })

      }

    }
    //设置勘探确认功能
    const confirmDeleteKanTan = () => {
      // console.log(kanTanDetail.value.id);
      let index = 0
      for (index = 0; index < timeKanTanLineArr.value.length; index++) {
        const element = timeKanTanLineArr.value[index];
        if (element.id === kanTanDetail.value.id) {
          break
        }
      }
      timeKanTanLineArr.value.splice(index, 1)
      appContext.config.globalProperties.axios({
        url: `api/exploreFeedback/delete?landId=${landId.value}&exploreId=${kanTanDetail.value.id}`,
        method: 'get',
        data: []
      }).then(() => {
        // console.log("delete")
      })
    }
    //点击图标功能
    const handleProgress = (index) => {
      currentProgress.value = index + 1
    }

    //搜索弹出框传送内容
    const passLandId = (id) => {
      //地块序号
      landId.value = id;
      landTimeLine.value = []
      EvaluationTimeLine.value = []
      timeKanTanLineArr.value = []
      appContext.config.globalProperties.axios({
        url: `api/landFeedback/find?landId=${landId.value}`,
        method: 'get',
        data: []
      }).then((response) => {
        response.data.forEach(item => {
          let object = {
            index: '',
            name: '',
            id: '',
            title: '',
            content: '',
            questionUser: '',
            time: '',
            apply: '',
            replayUser: '',
            isApply: false
          }
          object.index = item.landid
          object.name = item.name
          object.id = item.qid
          object.title = item.qtitle
          object.content = item.qcontent
          object.questionUser = item.quser
          object.time = getTime(item.qdate)
          object.apply = item.rcontent
          object.replayUser = item.ruser
          object.isApply = item.rstatus === '1';
          landTimeLine.value.push(object)
        })
      })
      appContext.config.globalProperties.axios({
        url: `api/evalFeedback/find?landId=${landId.value}`,
        method: 'get',
        data: []
      }).then((response) => {
        response.data.forEach(item => {
          let object = {
            index: '',
            name: '',
            id: '',
            title: '',
            content: '',
            questionUser: '',
            time: '',
            apply: '',
            replayUser: '',
            isApply: false
          }
          object.index = item.landid
          object.name = item.name
          object.id = item.qid
          object.title = item.qtitle
          object.content = item.qcontent
          object.questionUser = item.quser
          object.time = getTime(item.qdate)
          object.apply = item.rcontent
          object.replayUser = item.ruser
          object.isApply = item.rstatus === '1';
          EvaluationTimeLine.value.push(object)
        })
      })
      appContext.config.globalProperties.axios({
        url: `api/explorefeedback/findexplore?landid=${landId.value}`,
        method: 'get',
        data: []
      }).then((response) => {
        response.data.forEach(item => {
          let object = {
            index: '',
            name: '',
            id: '',
            desc: '',
            time: '',
            replayUser: '',
            pic: [],
            video: [],
          }
          object.index = item.landId
          object.name = item.name
          object.id = item.eid
          object.desc = item.econtent
          object.time = getTime(item.edate)
          object.replayUser = item.euser
          getPicVideoUrl(item.eid, item.eimage1, object.pic, 1)
          getPicVideoUrl(item.eid, item.eimage2, object.pic, 1)
          getPicVideoUrl(item.eid, item.eimage3, object.pic, 1)
          getPicVideoUrl(item.eid, item.eimage4, object.pic, 1)
          getPicVideoUrl(item.eid, item.eimage5, object.pic, 1)
          getPicVideoUrl(item.eid, item.eimage6, object.pic, 1)
          getPicVideoUrl(item.eid, item.eimage7, object.pic, 1)
          getPicVideoUrl(item.eid, item.eimage8, object.pic, 1)
          getPicVideoUrl(item.eid, item.eimage9, object.pic, 1)
          getPicVideoUrl(item.eid, item.evideo1, object.video, 2)
          getPicVideoUrl(item.eid, item.evideo2, object.video, 2)
          getPicVideoUrl(item.eid, item.evideo3, object.video, 2)
          timeKanTanLineArr.value.push(object)
        })
        // console.log(timeKanTanLineArr.value)
      })
    }

    const selectItemModal = (progress) => {
      //地块进度序号
      Progress.value = progress
      currentProgress.value = progress
      newState.value = !newState.value
      openModal()
    }

    const passTitle = (i) => {
      //地块名字
      title.value = i
    }

    const passStateId = (id) => {
      stateId.value = id
    }

    //通过键
    const PassState = ref(false)
    const passModal = () => {
      PassState.value = !PassState.value
      setTimeout(() => {
        currentProgress.value = currentProgress.value + 1
        Progress.value = Progress.value + 1
        stateId.value = 1
      }, 10)
    }
    watch(PassState, () => {
          setTimeout(() => {
            reload(3);
          }, 100)
        }
    )
    //确定键
    const confirmState = ref(false)
    const confirmModal = () => {
      confirmState.value = !confirmState.value
    }
    watch(confirmState, () => {
      setTimeout(() => {
        reload(3);
      }, 100)

    })

    //取消键
    const closeModal = () => {
      dialogFormVisible.value = false
      // setTimeout(() => {
      //   reload(3);
      // }, 10)
    }
    return {
      kanTanDetail,
      questionChild,
      getCurrentKanTanItem,
      isShowRight,
      operateCanSave,
      confirmDeleteKanTan,
      isShowKanTanRight,
      getCurrentItem,
      confirmDeleteQues,
      currentQuestionItem,
      handleQuestion,
      questionDetail,
      handleKanTan,
      option,
      option1,
      option2,
      formObj,
      detailArr,
      num,
      searchNum,
      type,
      Time,
      process,
      area,
      Data,
      data1,
      keyWords,
      isKanTan,
      isQuestion,
      saveQuestion,
      SearchButton,
      getCurrentTime,
      test,
      progressArrWithActive,
      handleProgress,
      currentProgress,
      dialogFormVisible,
      closeModal,
      passModal,
      openModal,
      selectItemModal,
      Change,
      passLandId,
      Progress,
      landId,
      title,
      confirmModal,
      confirmState,
      PassState,
      timeKanTanLineArr,
      timeQuestionLineArr,
      closeTimeModal,
      viewTimeLine,
      dialogTimeVisible,
      passTitle,
      passStateId,
      stateId,
      landTimeLine,
      EvaluationTimeLine,
      getPicVideoUrl,
      reload,
      getTime,
      receiveStateId,
      name,
      newState,
      receiveProgress
    }
  }
})

</script>


<style lang="scss">
.sub-main-search-view {
  display: flex;
  flex-direction: row-reverse;
  height: 100%;
  position: relative;

  .fix-operate-map {
    .el-dialog__body {
      padding:calc(var(--el-dialog-padding-primary) - 1.92083vw) var(--el-dialog-padding-primary)
    }
  }

  .search-select {
    width: 400px;
    height: 100%;
    box-sizing: border-box;

    .select-search-card-content {
      display: flex;
      flex-direction: column;
      height: 100%;

      .search-header {
        .input-search-btn {
          display: flex;
          align-items: center;

          .input-search {
            width: 292px;

            .el-input {
              --el-input-text-color: #edffff
            }
          }

          .input-btn {
            flex: 1;
            margin-left: 8px;
          }
        }
      }

      .search-content {
        margin-top: 20px;

        .search-content-item-wrap {
          margin-bottom: 8px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .search-content-item {
            width: 170px;

            .el-select {
              .el-input__inner {
                --el-input-text-color: #edffff
              }
            }
          }
        }
      }

      .search-count {
        color: rgba(240, 245, 255, 0.55);
        margin-top: 8px;

        .search-count-number {
          color: #E69E56;
        }
      }

      .search-detail {
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        margin-top: 20px;
        flex: 1;
        height: 0;
        overflow-y: auto;

      }
    }
  }
}

.progress-line {
  display: flex;
  align-items: center;

  .line-circle {
    cursor: pointer;
    width: 27px;
    height: 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.32);
    border-radius: 80px;
    color: rgba(255, 255, 255, 0.32);
    line-height: 24px;
    text-align: center;
    margin-right: 5px;

    &.is-active {
      background: #409EFF;
      color: #FFFFFF;
      border-color: #409EFF;
    }
  }

  .line-text {
    cursor: pointer;
    color: #FFFFFF;
    width: 12%;

    &.is-active {
      color: #409EFF;
      font-weight: 400;

    }
  }

  .line-only {
    width: 38px;
    cursor: pointer;
    height: 1px;
    background: rgba(255, 255, 255, 0.5);
    margin: 0 8px;

    &.is-active {
      background: #409EFF;
    }
  }

}

.progress-table {
  .progress-table-header {
    font-size: 16px;
    color: rgba(240, 245, 255, 0.95);
    margin: 18px 0;
    text-align: center;

    &.table-2 {
      margin-bottom: 24px;
    }
  }
}

.plan-modal {
  display: flex;
  align-items: flex-end;
  cursor: pointer;

  .modal-content-header-title {
    font-size: 18px;
    color: #ffffff;
  }

  .modal-content-header-operate {
    font-size: 12px;
    color: #409EFF;
    padding-left: 8px;
  }
}

.header-modal-two {
  display: flex;
  align-items: center;

  .modal-content-header-title {
    width: 300px;
    font-size: 18px;
    color: #ffffff;

    &.right {
      border-left: 2px solid rgba(255, 255, 255, 0.2);
      padding-left: 22px;
    }
  }
}

.time-line-footer {

}

.add-question {
  width: 130px;
  height: 28px;
  background: rgba(255, 255, 255, 0.002);
  border: 1px solid rgba(245, 248, 255, 0.25);
  border-radius: 4px;
  color: rgba(240, 245, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  cursor: pointer;

  .add {
    margin-right: 8px;
  }
}

.header-modal-two {
  display: flex;
  align-items: center;
}

.content-center {
  display: flex;
  align-items: stretch;

  .left {
    width: 300px;
    padding-top: 22px;
  }

  .center {
    width: 0;
    border-left: 2px solid rgba(255, 255, 255, 0.2);
  }

  .right {
    flex: 1;
    padding-left: 22px;
    padding-top: 22px;
  }
}

</style>
